<!-- 我的钱包 -->
<template>
	<view class="content">
		<view class="head-box">
			<!-- 标题栏 -->
			<shopro-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content" style="    justify-content: center;">
					<text class="mcai">我的采购</text>
					
				</view>
				<view class="rxuan" slot="right" @click="getshai">筛选</view>
			</shopro-navbar>
			<!-- 筛选栏 -->
			
		</view>
		<u-sticky ref="uSticky" bgColor="#fff" offsetTop="0">
			<u-tabs active-color="#ff6d00" :list="tablist" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</u-sticky>
		
		<view class="glist"  v-for="(item,index) in walletLog" :key="index">
			<view class="gone">
				<text class="biao">{{item.title}}</text>
				<text class="biaotime zt">{{item.status}}</text>
			</view>
			<text class="nei">{{item.createtime}}</text>
			<text class="nei">{{item.content}}</text>
			<view class="ztbtn">
				<view class="btn" @click="del(item,index)">删除</view>
				<view class="btn zeng" @click="wancheng(item)">完成</view>
			</view>
		</view>

		<view class="add" @click="getadd">+</view>
		

		<!-- 筛选 -->
		<u-popup v-model="pubbotshow" mode="bottom" @close="pubbotclose" :closeable="true" z-index="10075">
			<scroll-view scroll-y class="popview">
				<view class="shaiview">
					<view class="shaiitem">
						<text class="shaitit">筛选</text>
						<view class="shailist">
							<view class="shais" :class="popinfo.id==i.id?'sactive':''"  v-for="(i,ind) in poplist" :key="ind" @click="getpageClick(i)">{{i.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapActions, mapGetters } from 'vuex';
// import { threadId } from 'worker_threads';
	export default {
		components: {},
		data() {
			return {
				tablist:[
					{
						name: '待审核'
					}, {
						name: '采购中'
					}, {
						name: '已完成'
					},{
						name: '未通过'
					}
				],
				current:0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				walletLog:[],
				isEmpty: false,
				pubbotshow:false,
				poplist:[],
				popinfo:{
					id:''
				}
			};
		},
		computed: {
		},
		onShow() {
		},
		onLoad(){
			this.getWalletLog()
			this.getcate()
		},
		// 触底加载更多
		onReachBottom() {
			if (this.currentPage < this.lastPage) {
				this.currentPage += 1;
				this.getWalletLog();
			}
		},
		methods: {
			getcate(){
				let that = this
				that.$http('home.getCate', {
				}).then(res => {
					this.poplist = res.data
				})
			},
			getWalletLog() {
				let that = this;
				let status = '0' //0=待审核 2=未通过 1=采购中 3=已完成
				if(that.current == 0){
					status = '0'
				}else if(that.current == 1){
					status = '1'
				}else if(that.current == 2){
					status = '3'
				}else if(that.current == 3){
					status = '2'
				}
				that.loadStatus = 'loading';
				that.$http('home.needgetListByPage', {
					// wallet_type: 'money',
					// status: that.stateCurrent,
					status:status,
					page: that.currentPage,
					cid:this.popinfo.id
				}).then(res => {
					console.log(res)
					if (res.code === 1) {
						that.walletLog = [...that.walletLog, ...res.data.list];
						// that.incomeMoney = res.data.income;
						// that.expendMoney = Math.abs(res.data.expend);
						that.isEmpty = !that.walletLog.length;
						that.lastPage = res.data.lastpage;
						that.loadStatus = that.currentPage < res.data.lastpage ? 'loadmore' :
							'nomore';
						console.log(that.walletLog)	
					}
				});
			},
			getpageClick(i){
				this.popinfo = i
				this.pubbotshow = false
				this.getClear()
			},
			getDetail(){
				this.jump('/pages/user/new/GongDetail')
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			change(e){
				this.current = e
				this.loadStatus =  'loadmore' //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				this.currentPage= 1
				this.walletLog=[]
				this.getWalletLog();
			},
			getClear(){
				this.loadStatus =  'loadmore' //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				this.currentPage= 1
				this.walletLog=[]
				this.getWalletLog();
			},
			del(item,index){
				let that = this;
				uni.showModal({
					title: '删除提示',
					confirmColor: '#f0c785',
					content: `是否确认删除此项?`,
					success: res => {
						if (res.confirm) {
							that.$http(
								'home.needdelete',
								{
									id: item.id
								}
							).then(res => {
								if (res.code == 1) {
									this.$u.toast(res.msg);
									this.walletLog.splice(index, 1);
								}
							});
						}
						
						
					}
				});
			},
			wancheng(item){
				let that = this
				that.$http(
					'home.needcomplete',
					{
						id: item.id
					}
				).then(res => {
					if (res.code == 1) {
						this.$u.toast(res.msg);
						this.getClear();
					}
				});
			},
			getadd(){
				this.jump('/pages/user/new/CaigouFabu')
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			getshai(){
				this.pubbotshow = true
			}
		}
	};
</script>

<style lang="scss" scoped>
	// 钱包记录
	.content {
		padding-bottom: 30rpx;
		.glist{
			padding: 20rpx;
			border-radius: 10rpx;
			// margin-bottom: 20rpx;
			background-color: #fff;
			margin: 20rpx 20rpx 0;
			.gone{
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #eee;
				padding-top: 10rpx;
				.biao{
					color: #333;
					font-weight: 500;
					font-size: 30rpx;
				}
				.biaotime{
					margin-left: auto;
					color: #666;
					font-weight: 400;
					font-size: 24rpx;
				}
				.zt{
					color: #ff6d00;
					font-size: 30rpx;
				}
			}
			.nei{
				margin-top: 20rpx;
				color: #666;
				font-size: 26rpx;
				display: block;
			}
		}
	}
	.ztbtn{
		border-top: 1rpx solid #eee;
		padding: 20rpx 0 0;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.btn{
		
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
		border: 1rpx solid #CCCCCC;
		font-weight: 500;
		font-size: 20rpx;
		color: #333333;
		margin: 0 10rpx 5rpx;
		min-width: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.zeng{
		border: 1rpx solid #ff6d00;
		color: #ffff;
		background-color: #ff6d00;
	}
	.add{
		position: fixed;
		z-index: 100;
		right: 30rpx;
		bottom: 10%;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #ff6d00;
		color: #fff;
		font-size: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
	.mcai{
		color: rgb(0, 0, 0);
		font-weight: 500;
		display: block;
		text-align: center;
	}
	.rxuan{
		position: absolute;
		right: 30rpx;
		color: #333;
		font-size: 28rpx;
	}

	/deep/.u-drawer-bottom{
		background-color: transparent;
	}
	.popview{
		padding: 30rpx 0 130rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		max-height: 70vh;
		// #ifdef APP-PLUS
		padding-bottom: 130rpx;
		// #endif
	}
	.shaiview{
		padding: 25rpx 30rpx;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		// z-index: 100;
		.shaiitem{
			margin-bottom: 20rpx;
			.shaitit{
				display: block;
				margin-bottom: 24rpx;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
			.shailist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				.shais{
					width: 31%;
					margin-right: 2%;
					height: 64rpx;
					background: #F8F8F8;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 25rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}
				.sactive{
					background: #FFF0F0;
					color: #FA4E4E;
				}
			}
		}
		.shaiitem:last-child{
			margin-bottom: 0 !important;
		}
		
		.chongview{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.czhi{
				width: 48%;
				height: 80rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
			.que{
				width: 48%;
				height: 80rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
</style>
